<script lang="ts" setup>
import UseBtn from '@/components/use-btn/index.vue'
import { InsightItem, InsightStatus, UserInsight, UserProfile } from '@/models/user-info'
import NotData from '@/components/NotData.vue'
import _ from 'lodash'
import dayjs from 'dayjs'
import { avatarUrl } from '@/utils'

const props = withDefaults(
  defineProps<{
    itemData: InsightItem
    isTab: boolean
  }>(),
  {},
)

const emit = defineEmits([
  'editInsightsUser',
  'discard',
  'confirm',
  'removeUserInsight',
  'portrait',
  'pickerSelect',
])

const isLoading = ref(false)
const userInsightsState = reactive<{
  list: UserInsight[]
  remove: (item: UserInsight) => void
  edit: (item: UserInsight) => void
  openEdit: (item: UserInsight) => void
}>({
  list: [],
  remove: (item) => {
    uni.showModal({
      title: '提示',
      content: '确定删除该用户洞察吗？',
      success: (res) => {
        if (res.confirm) {
          userInsightsState.list = userInsightsState.list.filter((i) => i.id !== item.id)
          emit('removeUserInsight', item)
        }
      },
    })
  },
  edit: (item) => {
    emit('editInsightsUser', {
      id: item.id,
      content: item.content,
    })
    item.isEdit = false
    isFocus.value = false
  },
  openEdit: (item) => {
    if (isLoading.value) return
    isLoading.value = true

    item.isEdit = !item.isEdit
    isFocus.value = item.isEdit

    if (!item.isEdit) {
      emit('editInsightsUser', {
        id: item.id,
        content: item.content,
      })
    }

    setTimeout(() => {
      isLoading.value = false
    }, 300)
  },
})

const userProfilesState = reactive<{
  list: UserProfile[]
}>({
  list: [],
})

watch(
  () => props.itemData,
  (val) => {
    userInsightsState.list = _.cloneDeep(val.user_insights)
    userProfilesState.list = _.cloneDeep(val.user_profiles)
  },
  {
    deep: true,
    immediate: true,
  },
)

const tabState = reactive({
  value: 0,
  list: [
    { title: '用户洞察', value: 0 },
    { title: '用户画像', value: 1 },
  ],
})

const time = computed(() => {
  return dayjs(props.itemData.created_at)?.format('YYYY-MM-DD')
})

const tagStatus = computed(() => {
  if (props.itemData.status === InsightStatus.Discarded) return 'tag-black'
  if (props.itemData.status === InsightStatus.Confirmed) return 'tag-black'
  return ''
})

function confirm() {
  emit('confirm')
}

const isFocus = ref(false)
function pickerClick() {
  if (!props.itemData.students.length) return
  emit('pickerSelect')
}

const selectLabel = computed(() => {
  const index = props.itemData.students.findIndex((item) => item.id === props.itemData.student_id)
  if (index === -1) return ''
  return props.itemData.students[index].real_name
})
</script>

<template>
  <view class="list-view user-info-list-item">
    <view class="head">
      <view class="flex items-center">
        <image :src="avatarUrl(itemData.customer.avatar)" class="avatar"></image>
        <view class="name ellipsis">{{ itemData.customer.display_name }}</view>
        <view class="time">{{ time }}</view>
      </view>
      <view class="tag" :class="tagStatus">{{ itemData.status_label }}</view>
    </view>
    <!-- <picker
      title="选择用户"
      :range="columns"
      v-if="columns.length"
      :value="valueIndex"
      range-key="label"
      :disabled="itemData.status !== InsightStatus.Unconfirmed"
      @change="pickerChange"
    >
      
    </picker> -->
    <view class="input-select" @click="pickerClick" v-if="itemData.students.length">
      <text>{{ selectLabel || '请选择' }}</text>
      <image
        src="@/static/images/sys/icon-bottom.png"
        v-if="itemData.status === InsightStatus.Unconfirmed"
      ></image>
    </view>
    <view class="list-tab">
      <wd-tabs inactive-color="#6A707C" v-model="tabState.value">
        <block v-for="item in tabState.list" :key="item.value">
          <wd-tab :title="item.title" :name="item.value"></wd-tab>
        </block>
      </wd-tabs>
    </view>
    <view class="card" v-if="tabState.value === 0">
      <view
        class="inputs"
        style="background: #f8f9fb"
        :style="item.isEdit && isFocus ? 'border: 2rpx solid #1876ff' : ''"
        v-for="item in userInsightsState.list"
        :key="item.id"
      >
        <view v-if="item.isEdit && isFocus">
          <textarea
            @blur="() => userInsightsState.edit(item)"
            @focus="() => (isFocus = true)"
            v-model="item.content"
            :disabled="!item.isEdit"
            :focus="isFocus"
            auto-height
            placeholder="请输入"
          ></textarea>
        </view>
        <view v-else style="line-height: 40rpx">
          <text style="vertical-align: middle">{{ item.content }}</text>
          <view
            style="display: inline-block; vertical-align: middle"
            class="edit-icon-btn ml-2"
            @click="userInsightsState.openEdit(item)"
          ></view>
        </view>
        <view class="icons" v-if="itemData.status === InsightStatus.Unconfirmed && item.isEdit">
          <view class="edit-icon-btn" @click="userInsightsState.openEdit(item)"></view>
        </view>
        <view
          class="close"
          v-if="itemData.status === InsightStatus.Unconfirmed"
          @click="userInsightsState.remove(item)"
        ></view>
      </view>
      <view v-if="!userInsightsState.list.length" style="padding-bottom: 40rpx">
        <NotData text="暂无更多用户洞察" width="200rpx" height="200rpx"></NotData>
      </view>
    </view>
    <view v-if="tabState.value === 1">
      <view v-if="userProfilesState.list.length" class="card-info">
        <view v-for="item in userProfilesState.list" :key="item.id" class="info-views">
          <view class="labels">{{ item.field }}:</view>
          <view class="content">{{ item.value }}</view>
        </view>
      </view>
      <view v-else style="padding-bottom: 40rpx">
        <NotData text="暂无更多用户画像" width="200rpx" height="200rpx"></NotData>
      </view>
    </view>
    <view class="footer" v-if="itemData.status === InsightStatus.Unconfirmed">
      <UseBtn
        v-if="tabState.value === 1 && userProfilesState.list.length"
        :custom-style="{
          border: '2rpx solid #383838',
        }"
        :width="165"
        :height="64"
        :font-size="28"
        bg="#ffffff"
        @click="$emit('portrait')"
      >
        编辑画像
      </UseBtn>
      <view class="w-3"></view>
      <UseBtn :width="152" :height="64" :font-size="28" bg="#F8F9FB" @click="$emit('discard')">
        丢弃
      </UseBtn>
      <view class="w-3"></view>
      <UseBtn :width="152" :height="64" :font-size="28" @click="confirm">确认</UseBtn>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.card-info {
  box-sizing: border-box;
  padding: 24rpx;
  padding-bottom: 8rpx;
  margin-bottom: 30rpx;
  background: #f8f9fb;
  border-radius: 16rpx;
  .info-views {
    display: flex;
    width: 100%;
    margin-bottom: 16rpx;
    font-size: 28rpx;
    .labels {
      width: 110rpx;
      margin-right: 10rpx;
      color: #6a707c;
      text-align: right;
    }
    .content {
      max-width: calc(100% - 120rpx);
      color: #2b2f36;
    }
  }
}
.use-info {
  box-sizing: border-box;
  padding: 24rpx;
  margin-bottom: 24rpx;
  text-align: justify;
  background: #f8f8f8;
  border-radius: 16rpx;
  .form-item {
    margin-bottom: 14rpx;
    font-size: 28rpx;
    font-weight: 400;
    line-height: 40rpx;
    color: #9fa3aa;

    .value {
      color: #2b2f36;
    }
  }
}
.list-tab {
  display: flex;
  align-items: center;
  height: 100rpx;
}
.card {
  .label {
    margin-bottom: 20rpx;
    font-size: 25rpx;
    color: #6a707c;
  }
  .icons {
    display: flex;
    justify-content: flex-end;
  }
  .inputs {
    position: relative;
    box-sizing: border-box;
    padding: 24rpx;
    margin-bottom: 24rpx;
    font-size: 28rpx;
    color: #2b2f36;
    background: #f8f8f8;
    border: 2rpx solid #f8f8f8;
    border-radius: 16rpx;
    textarea {
      width: 100%;
      height: 40rpx;
    }
  }
  .close {
    position: absolute;
    top: -10rpx;
    right: -14rpx;
    width: 40rpx;
    height: 40rpx;
    background: url('@/static/images/sys/close-black.png');
    background-size: 100% 100%;
  }
}
.input-select {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72rpx;
  padding: 0 24rpx;
  margin-top: 24rpx;
  font-family:
    PingFangSC,
    PingFang SC;
  font-size: 28rpx;
  font-weight: 4 0 0;

  color: #2b2f36;
  border: 2rpx solid #c2c7d1;
  border-radius: 16rpx;

  image {
    width: 40rpx;
    height: 40rpx;
  }
}
.input-select:active {
  background: #fbfbfb;
}
@mixin flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48rpx;
  padding: 0 8rpx;
  font-family:
    PingFangSC,
    PingFang SC;
  font-size: 22rpx;
  font-weight: 400;
  border-radius: 8rpx;
}
.list-view {
  box-sizing: border-box;
  padding: 32rpx;
  margin: 0 32rpx 24rpx 32rpx;
  background: #ffffff;
  border: 1rpx solid #2b2f36;
  border-radius: 24rpx;
  .footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
  .head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .status-tag {
      box-sizing: border-box;
      height: 60rpx;
      padding: 8rpx 20rpx;
      font-family:
        PingFangSC,
        PingFang SC;
      font-size: 28rpx;
      font-weight: 500;
      color: #2b2f36;
      background: #f8f9fb;
      border-radius: 30rpx;
    }
    .avatar {
      width: 60rpx;
      height: 60rpx;
      border-radius: 50%;
    }
    .name {
      max-width: 190rpx;
      margin-right: 32rpx;
      margin-left: 24rpx;
      font-size: 27rpx;
      font-weight: 400;
      color: #2b2f36;
    }
    .time {
      font-family:
        PingFangSC,
        PingFang SC;
      font-size: 27rpx;
      font-weight: 400;
      color: #9fa3aa;
    }
  }

  .tag {
    font-family:
      PingFangSC,
      PingFang SC;
    font-size: 24rpx;
    font-weight: 400;
    color: #2b2f36;
    white-space: nowrap;

    background: #edffff;
    border: 2rpx solid #88dbdd;
    border-radius: 8rpx;
    @include flex-center;
  }

  .tag-black {
    @include flex-center;
    height: 48rpx;
    font-family:
      PingFangSC,
      PingFang SC;
    font-size: 24rpx;
    font-weight: 400;
    color: #9fa3aa;

    background: #f8f9fb;
    border: 0;
  }
}
</style>
